<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>保险超级课堂-热销产品管理</title>
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-icon-error {
            color: red;
            cursor: pointer;
        }

        .ql-editor {
            height: 300px;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header>
        <span class="title">{{titleText}}</span>
<!--        <el-button size="small" v-if="isList" @click="addVideo">添加视频</el-button>-->
        <el-button size="small" v-if="hasPermission('platform:cv:add')" @click="addVideo">添加视频</el-button>
        <el-button size="small" v-else @click="returnBack">返回</el-button>
    </header>
    <div class="table-wraper" v-if="isList">
        <div class="search-wraper">
            <div class="search-header">
                <span class="title">筛选查询</span>
                <el-button size="small" @click="search">查询结果</el-button>
            </div>
            <div class="search-form">
                <el-form inline label-width="100px" size="small">
                    <el-form-item>
                        <el-input v-model="q.searchWord" type="text" placeholder="标题" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="保险公司">
                        <el-select v-model="q.companyId" clearable placeholder="请选择保险公司" @change="changeType">
                            <el-option v-for="company in companyList"
                                       :key="company.icId"
                                       :label="company.icTitle"
                                       :value="company.icId.toString()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品类别">
                        <el-select v-model="q.typeId" clearable placeholder="产品类别" @change="changeType2">
                            <el-option v-for="type in typeList"
                                       :key="type.iitId"
                                       :label="type.iitTitle"
                                       :value="type.iitId.toString()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="entityList" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="cvId" label="序号"></el-table-column>
            <el-table-column prop="cvTitle" label="标题"></el-table-column>
            <el-table-column prop="totalTime" label="总应观看时长"></el-table-column>
            <el-table-column prop="studyTime" label="总已观看时长"></el-table-column>
            <el-table-column prop="companyName" label="保险公司"></el-table-column>
            <el-table-column prop="typeName" label="产品类别"></el-table-column>
            <el-table-column prop="cvUpTime" label="上传时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateVideo(scope.row)" v-if="hasPermission('platform:cv:edit')" type="text" size="medium">修改</el-button>
                    <el-button @click="deleteVideo(scope.row)" v-if="hasPermission('platform:cv:delete')" type="text" size="medium" class="color-F56C6C">删除
                    </el-button>
                    <el-button @click="showProgress(scope.row)" type="text" size="medium">查看学习情况</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-top: 10px"
                   @click="dels">批量删除
        </el-button>
        <div class="table-footer" style="text-align: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <div class="edit-wraper" v-else>
        <div style="width: 40%; margin: 50px auto;">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="标题">
                    <el-col :span="12">
                        <el-input v-model="addForm.cvTitle"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="封面图" prop="cvImg">
                    <el-upload
                            class="avatar-uploader"
                            action="doUpload"
                            :before-upload="beforeUpload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="视频上传" prop="Video">
                    <!-- action必选参数, 上传的地址 -->
                    <el-upload class="avatar-uploader el-upload--text"
                               action="uploadUrl"
                               :show-file-list="false"
                               :on-success="handleVideoSuccess"
                               :before-upload="beforeUpload2"
                               :on-progress="uploadVideoProcess">
                        <video v-if="videoUrl !='' && videoFlag == false"
                               :src="videoUrl"
                               class="avatar"
                               controls="controls">您的浏览器不支持视频播放
                        </video>
                        <i v-else-if="videoUrl =='' && videoFlag == false"
                           class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="videoFlag == true" type="circle"
                                     :percentage="videoUploadPercent"
                                     style="margin-top:30px;"></el-progress>
                    </el-upload>
                </el-form-item>
                <el-form-item label="保险公司">
                    <el-select v-model="addForm.cpId" clearable placeholder="请选择保险公司">
                        <el-option v-for="company in companyList"
                                   :key="company.icId"
                                   :label="company.icTitle"
                                   :value="company.icId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品类别">
                    <el-select v-model="addForm.itId" clearable placeholder="产品类别">
                        <el-option v-for="type in typeList"
                                   :key="type.iitId"
                                   :label="type.iitTitle"
                                   :value="type.iitId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属省行">
                    <el-select v-model="bankIdList" multiple clearable placeholder="请选择省行">
                        <el-option v-for="bank in bankList"
                                   :key="bank.bankId"
                                   :label="bank.bankName"
                                   :value="bank.bankId.toString()">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="returnBack">返回</el-button>
                    <el-button type="primary" @click="submit()">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                //列表url
                listUrl: 'irClassVideo/getVideoList',
                //删除url
                delUrl: 'irClassVideo/doDeleteVideo',
                folder: 'irClassVideo',
                q: {
                    searchWord: '',
                    companyId: "",
                    typeId: ""
                },
                isEdit: false,
                isAdd: false,
                isList: true,
                addForm: {},
                entityList: [],
                typeList: [],
                companyList: [],
                bankList: [],
                bankIdList: [],
                currentPage: 1,
                pageSize: 10,
                total: 1000,
                changeArr: [],
                dialogImageUrl: '',
                dialogVisible: false,
                videoFlag: false,
                videoUrl: "",
                videoUploadPercent: 0
            }
        },
        methods: {
            showProgress(row){
                console.log(row.cvId);
                window.location.href  = "11-indexMessage.html?videoId="+row.cvId;
            },
            beforeUpload2(file) {
                var fd = new FormData();
                fd.append('file', file);//传文件
                fd.append('folder', vm.folder);//传其他参数
                axios.post(baseURL + 'api/upload', fd).then(
                    function (res) {
                        if (res.data.code == 0) {
                            vm.setPic2(res.data.path)
                            vm.$message({
                                message: '上传成功',
                                type: 'success'
                            });
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }

                    }).catch(function (error) {
                    console.log(error);
                    vm.$message({
                        message: '上传失败',
                        type: 'error'
                    });
                });
            },
            setPic2(path) {
                this.videoUrl = imageURL + path
                this.addForm.cvUrl = path
            },
            handleVideoSuccess(res, file) {
                this.videoFlag = false;
                this.videoUploadPercent = 0;
            },
            beforeUploadVideo(file) {
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
                    this.$message.error('请上传正确的视频格式');
                    return false;
                }
            },
            uploadVideoProcess(event, file, fileList) {
                this.videoFlag = true;
                this.videoUploadPercent = file.percentage.toFixed(0);
            },
            changeType(val) {
                if (val) {
                    this.$set(this.q, this.q.companyId, val.value)
                }
                this.getEntityList()
            },
            changeType2(val) {
                if (val) {
                    this.$set(this.q, this.q.typeId, val.value)
                }
                this.getEntityList()
            },
            dels: function () {
                var ids = [];
                $.each(vm.changeArr, function (k, v) {
                    ids.push(v.cvId);
                })
                if (ids.length == 0) {
                    vm.vAlert('请选择您要删除的数据', '错误')
                    return false;
                }
                vm.del(ids)
            },
            search() {
                vm.currentPage = 1
                vm.getEntityList()
            },
            /*编辑start*/
            updateVideo(row) {
                this.isEdit = true;
                this.isAdd = false;
                this.isList = false
                this.addForm = row
                this.dialogImageUrl = imageURL + row.cvImg;
                this.videoUrl = imageURL + row.cnUrl;
                this.bankIdList = [];
                if (row.cvBank != '') {
                    var list = row.cvBank.split(",")
                    for (let i = 0; i < list.length; i++) {
                        if (list[i] != "") {
                            this.bankIdList.push(list[i]);
                        }
                    }
                }
            },
            addVideo() {
                this.isList = false
                this.isAdd = true
                this.isEdit = false
                this.addForm = {}
                this.bankIdList = []
                this.dialogImageUrl = ""
            },
            deleteVideo(row) {
                var ids = [];
                ids.push(row.cvId);
                vm.del(ids);
            },
            /*删除end*/
            returnBack: function () {
                this.isEdit = false;
                this.isAdd = false;
                this.isList = true;
                this.addForm = {};
                this.getEntityList();
            },
            submit() {
                var url = "";
                if (vm.addForm.cvId == null) {
                    url = baseURL + "irClassVideo/doAddVideo"
                } else {
                    url = baseURL + "irClassVideo/doUpdateVideo"
                }
                if (vm.addForm.cvImg == null || vm.addForm.cvImg == '') {
                    vm.vAlert('请上传封面图', '错误')
                    return false;
                }
                if (vm.addForm.cvUrl == null || vm.addForm.cvUrl == '') {
                    vm.vAlert('请上传视频', '错误')
                    return false;
                }
                if (vm.addForm.cpId == null || vm.addForm.cpId == '') {
                    vm.vAlert('请选择保险公司', '错误')
                    return false;
                }
                if (vm.addForm.itId == null || vm.addForm.itId == '') {
                    vm.vAlert('请选择产品类别', '错误')
                    return false;
                }
                //添加选择的省行
                vm.addForm.cvBank = ""
                if (vm.bankIdList.length == 0) {
                    vm.vAlert('请选择省行', '错误')
                    return false;
                }
                for (var i = 0; i < vm.bankIdList.length; i++) {
                    if (vm.bankIdList[i] != "") {
                        vm.addForm.cvBank += vm.bankIdList[i] + "," //以逗号间隔
                    }
                }
                axios.post(url + "?token=" + token, this.addForm)
                    .then(function (res) {
                        if (res.data.msg == 'token失效，请重新登录') {
                            alert('token失效，2秒后跳转到登录页面！');
                            var timeout = setTimeout(function () {
                                window.parent.location.href = baseURL + "login.html";
                                clearTimeout(timeout);
                            }, 2000)
                        }
                        if (res.data.code === 0) {
                            vm.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                vm.reload()
                            }, 500)
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                    });
            },
            setPic(path) {
                vm.dialogImageUrl = imageURL + path
                vm.addForm.cvImg = path
            },
            handleAvatarSuccess(res, file) {
            },
            //获取类别
            getTypeList() {
                this.typeList = []
                $.get(baseURL + "irClassVideo/getTypeList", function (r) {
                    if (r.msg == 'token失效，请重新登录') {
                        alert('token失效，2秒后跳转到登录页面！');
                        var timeout = setTimeout(function () {
                            window.parent.location.href = baseURL + "login.html";
                            clearTimeout(timeout);
                        }, 2000)
                    } else if (r.typeList != null) {
                        vm.typeList = r.typeList
                    }
                });
            },
            //获取保险公司
            getCompanyList() {
                this.companyList = []
                $.get(baseURL + "irClassVideo/getCompanyList", function (r) {
                    if (r.msg == 'token失效，请重新登录') {
                        alert('token失效，2秒后跳转到登录页面！');
                        var timeout = setTimeout(function () {
                            window.parent.location.href = baseURL + "login.html";
                            clearTimeout(timeout);
                        }, 2000)
                    } else if (r.companyList != null) {
                        vm.companyList = r.companyList
                    }
                });
            },
            //获取省行
            getBankList() {
                this.bankList = []
                $.get(baseURL + "irClassVideo/getBankList", function (r) {
                    if (r.msg == 'token失效，请重新登录') {
                        alert('token失效，2秒后跳转到登录页面！');
                        var timeout = setTimeout(function () {
                            window.parent.location.href = baseURL + "login.html";
                            clearTimeout(timeout);
                        }, 2000)
                    } else if (r.bankList != null) {
                        vm.bankList = r.bankList
                    }
                });
            }
        },
        computed: {
            titleText: function () {
                if (this.isEdit) {
                    return '编辑'
                } else if (this.isAdd) {
                    return '添加'
                } else if (this.isList) {
                    return '热销产品管理'
                }
            }
        },
        created() {
            this.getTypeList();
            this.getCompanyList();
            this.getBankList();
            this.getEntityList();
        }
    })
</script>
</html>
